<!-- 选择问诊类型页面 -->
<template>
  <view
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100vh;
      background-color: #fff;
    "
  >
    <TopNavigation leftTitle="极速问诊" rightTitle="问诊记录" />
    <img src="@/static/image.png" alt="" class="mx-0 my-15rpx w-[480rpx] h-[412rpx]" />
    <view class="mx-0 my-35rpx h-50rpx w-322rpx">
      <text class="textOne">20s</text>
      <text>快速匹配专业医生</text>
    </view>

    <view
      style="
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        height: 156rpx;
        padding: 20rpx;
        margin-top: 40rpx;
        background-color: #fff;
        box-shadow: 1rpx 1rpx 2rpx 1rpx #ccc;
      "
      @click="toDescribeee"
    >
      <view style="display: flex; align-items: center; justify-content: space-around">
        <view>
          <img style="width: 80rpx; margin-right: 20rpx" src="@/static/home-img/2.png" alt="" />
        </view>
        <view>
          <view>高速匹配医生</view>
          <view style="margin-top: 10rpx; font-size: 25rpx; color: #cdcdcd">
            三甲主治及以上级别医生
          </view>
        </view>
      </view>
      <view>
        <wd-icon name="arrow-right" size="22px" color="#d9d9da" />
      </view>
    </view>

    <view
      style="
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        height: 156rpx;
        padding: 20rpx;
        margin-top: 40rpx;
        background-color: #fff;
        box-shadow: 1rpx 1rpx 2rpx 1rpx #ccc;
      "
      @click="toDescribe"
    >
      <view style="display: flex; align-items: center; justify-content: space-around">
        <view>
          <img
            style="width: 90rpx; margin-right: 20rpx"
            src="/src//static//home-img/3.png"
            alt=""
          />
        </view>
        <view>
          <view>快速匹配医生</view>
          <view style="margin-top: 10rpx; font-size: 25rpx; color: #cdcdcd">
            三甲主治及以上级别医生
          </view>
        </view>
      </view>
      <view>
        <wd-icon name="arrow-right" size="22px" color="#d9d9da" />
      </view>
    </view>
  </view>
  <wd-overlay :show="show" :zIndex="999">
    <view
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      "
    >
      <wd-loading color="#fff" />
      <view style="margin-top: 20rpx; font-size: 30rpx; color: #fff">正在为您匹配医生...</view>
    </view>
  </wd-overlay>
</template>

<script lang="ts" setup>
import TopNavigation from "@/components/TopNavigation.vue";

const show = ref(false);
//普通问诊
function toDescribe() {
  // 设置延时器延迟跳转
  show.value = true;
  setTimeout(() => {
    uni.navigateTo({ url: "/pages/selectDepartment/index" });
    show.value = false;
  }, 5000);
}
//三甲问诊页面
function toDescribeee() {
  uni.navigateTo({ url: "/pages/selectDepartment/index" });
}
</script>

<style lang="scss" scoped>
.textOne {
  margin-right: 5rpx;
  font-size: 32rpx;
  font-weight: medium;
  line-height: 50rpx;
  color: #16c2a3;
  letter-spacing: rpx0;
}
</style>
